<template>
  <section>
    <div class="side-show" :class="{ show: isShow }">
      <div class="menu-box">
        <div
          class="menu-item"
          :class="{ 'current-item': currentIndex == 0 }"
          @click="goHome(0)"
        >
          首页-综合概览
        </div>
        <div
          class="menu-item"
          :class="{ 'current-item': currentIndex == 1 }"
          @click="selectSubitem(1)"
        >
          能耗监测
        </div>
        <div
          class="menu-item"
          :class="{ 'current-item': currentIndex == 2 }"
          @click="selectSubitem(2)"
        >
          能耗统计
        </div>
        <div
          class="menu-item"
          :class="{ 'current-item': currentIndex == 3 }"
          @click="selectSubitem(3)"
        >
          用能审计
        </div>
      </div>

      <div
        class="sub-items-box"
        v-show="showSubitem"
        @mouseleave="showSubitem = false"
      >
        <div
          class="sub-item"
          :class="{ 'current-path': $route.name === item.name }"
          v-for="(item, index) in targetSubitem"
          :key="index"
          @click="linkRouter(item.path)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>

    <div
      class="sub-menu"
      :class="{ 'show-title': isShow }"
      v-show="!showSubitem"
    >
      <section class="sub-menu-station">
        <div
          class="sub-menu-item"
          :class="{ 'sub-menu-current': type === '中心' }"
          @click="stationTab('中心')"
        >
          中心
        </div>
        <div class="sub-menu-item2">-</div>
        <div
          class="sub-menu-item"
          :class="{ 'sub-menu-current': type === '站点' }"
          @click="stationTab('站点')"
        >
          站点
        </div>
      </section>
    </div>

    <div
      class="sub-menu-open"
      :class="{ 'show-open': isShow }"
      v-show="!showSubitem"
      @click="isShow = !isShow"
    ></div>
    <div class="station-list"></div>
  </section>
</template>
<script>
import {CentermenuitemList,CentersubitemList} from "./Menudata"
export default {
  data() {
    return {
      type: "中心",
      isCenter: true,
      isShow: false,
      showSubitem: false,
      currentIndex: sessionStorage.getItem("currentIndex") || 0,
      menuitemList: CentermenuitemList,
      subitemList: CentersubitemList,
      targetSubitem: JSON.parse(sessionStorage.getItem("staticItem")) || [],
    };
  },
  methods: {
    stationTab(type) {
      this.type = type;
      if (type === "中心") {
        this.$store.commit("SET_CENTER", true);
        this.$store.commit("SET_STATIONCODE", "S00");
      } else {
        this.$store.commit("SET_SHOW", false);
        this.$store.commit("SET_CENTER", false);
        this.$store.commit("SET_TABSTATUS", true);
        this.$store.commit(
          "SET_STATIONCODE",
          sessionStorage.getItem("detailId") || "S01"
        );
        this.$store.commit("SET_STATIONNAME", "左炮台东站");
        this.$router.push("/");
        this.$store.dispatch("getStationList");
      }
    },
    goHome(id) {
      this.currentIndex = id;
      sessionStorage.setItem("currentIndex", id);
      this.$router.push("/");
    },
    selectSubitem(id) {
      this.showSubitem = true;
      this.currentIndex = id;
      let listArr = this.subitemList.filter((item) => {
        return item.pid == id;
      });
      sessionStorage.setItem("currentIndex", id);
      sessionStorage.setItem(
        "staticItem",
        JSON.stringify(listArr[0].childrens)
      );
      this.targetSubitem = listArr[0].childrens;
    },
    linkRouter(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style lang="less" scoped>
.sub-menu {
  position: fixed;
  left: 0;
  top: 50%;
  width: 54px;
  height: 340px;
  transform: translateY(-50%);
  background: url("../../assets/img/side.png") no-repeat center;
  background-size: cover;
  color: #84bfdd;
  z-index: 2;
  text-align: center;
  writing-mode: vertical-lr;
  letter-spacing: 9.6px;
  line-height: 40px;
  font-weight: bold;
  font-size: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  &::-webkit-scrollbar {
    display: none;
  }
  .sub-menu-station {
    width: 100%;
    height: 100%;
    // background: #fff;
    writing-mode: horizontal-tb;
    // writing-mode:normal;
    // letter-spacing: 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .sub-menu-item {
      margin: -16px 0;
      cursor: pointer;
      //  background-color: aliceblue;
    }
    .lts {
      width: 100%;
      height: 100%;
      // background-color: #1db5ee;
      padding-right: 18px;
      writing-mode: vertical-lr;
      letter-spacing: 2px;
      line-height: 20px;
    }

    .sub-menu-current {
      color: #00f5ff;
    }
  }
}

.sub-menu-open {
  cursor: pointer;
  position: fixed;
  left: 54px;
  top: 50%;
  width: 16px;
  height: 34px;
  transform: translateY(-50%);
  background: url("../../assets/img/side-open.png") no-repeat center;
  background-size: cover;
  z-index: 2;
}
.show-title {
  left: 131px;
}
.side-show {
  position: fixed;
  z-index: 2;
  // left: 0;
  left: -131px;
  top: 50%;
  // animation: forward1 0.4s;
  width: 131px;
  height: 600px;
  transform: translateY(-50%);
  background: url("../../assets/img/showside.png") no-repeat center;
  background-size: cover;
}
.show {
  left: 0rem;
  // animation: forward 0.4s;
}
.menu-box {
  width: 100%;
  height: 300px;
  // background-color: #148fbd;
  position: relative;
  z-index: 2;
  left: 0;
  transform: translateY(-50%);
  top: 50%;
  .menu-item {
    cursor: pointer;
    width: 120px;
    height: 60px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    margin: 5px 0;
    text-align: center;
    line-height: 60px;
  }
  .current-item {
    background: url("../../assets/img/navbg.png") no-repeat center center;
    background-size: cover;
    box-shadow: 0px 16px 35px 0px #1db5ee;
    border-radius: 0 30px 30px 0;
    // background-color: #b5c4ae;
    // background-blend-mode:lighten;
  }
}
.sub-items-box {
  position: absolute;
  // padding: 10px 0;
  z-index: 2;
  left: 131px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  // height: 3rem;
  background: rgba(20, 143, 189, 0.7);
  box-shadow: 0px 0px 18px 0px #04162b;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .sub-item {
    cursor: pointer;
    width: 116px;
    height: 44px;
    margin: 5px auto;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 44px;
  }
  .current-path {
    background: #16b5ec;
  }
}
.show-open {
  left: 184px;
}

@keyframes forward {
  0% {
    left: -131px;
  }
  100% {
    left: 0;
  }
}
@keyframes forward1 {
  0% {
    left: 0;
  }
  100% {
    left: -131px;
  }
}
</style>
